<template>
  <m-card :title="title" :icon="icon">
    <div class="card-body pt-3">
      <div class="nav d-flex jc-between">
        <div
          class="nav-item"
          :class="{ active: active === i }"
          v-for="(item, i) in categories"
          :key="i"
          @click="$refs.list.swiper.slideTo(i)"
        >
          <div class="nav-link" @click="active = i">{{ item.name }}</div>
        </div>
      </div>
      <swiper
        ref="list"
        :options="{ autoHeight: true }"
        @slide-change="() => (active = $refs.list.swiper.activeIndex)"
      >
        <swiper-slide v-for="(category, i) in categories" :key="i">
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </m-card>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {}
}
</script>

<style scoped></style>
